<template>
    <div class="index">
        <!-- 页面头部开始 -->
        <div class="top">
            <div class="left">
                <span @click="$router.push('/')">柳州中心工企业应急周转资金申请平台</span>
            </div>
            <div class="right">
                <div class="toIndex">平台首页</div>
                <div>关于我们</div>
                <div>信息公告</div>
                <div class="userInfo">
                    <div>
                        <el-avatar
                                src="https://www.z4a.net/images/2022/10/14/avatar.jpg"
                                style="margin-top: 0.218rem;width: 0.709rem;height: 0.709rem;"
                        ></el-avatar>
                    </div>
                    <!-- 用户信息右边显示文字 -->
                    <div @click="$router.push('/home/personal-information')" class="userInfo-right">
                        <div class="Welcome-you">欢迎您！</div>
                        <div class="username">张万志</div>
                    </div>
                </div>
            </div>
        </div>
        <!--        <img src="@/assets/images/swiper.jpg" id="bg" alt=""/>-->
        <!-- 页面头部结束 -->
        <div class="main">
            <!-- 首页大图开始 -->
            <div class="swiper">
                <h1>柳州中小工企业应急周转资金申请平台</h1>
                <img alt="" id="bg" src="@/assets/images/swiper.jpg"/>
            </div>
            <!-- 首页大图结束 -->
            <div class="mainTop">
                <div class="search">
                    <input type="text"/>
                    <el-button class="el-button" style="font-size:0.22727rem;" type="primary">搜索</el-button>
                </div>
                <!--                    重写下面的-->
                <div class="searchBttom">
                    <!-- 第1个item -->
                    <div class="recomder">
                        <div class="nav-first">
                            <img alt="" src="@/assets/images/recommend-bgd.png"/>
                            <img class="mini-png" src="@/assets/images/recommend1.png">
                        </div>
                        <div class="recomder-Item">
                            <div class="number" style="text-align: start;margin-left: 0.25rem;">198</div>
                            <div style="font-size: 0.181rem; white-space: nowrap;margin-left: 0.2rem;text-align: start;">
                                认证企业
                            </div>
                        </div>
                    </div>
                    <!-- 第1个item -->
                    <!-- 第2个item -->
                    <div class="recomder">
                        <div class="nav-first">
                            <img alt="" src="@/assets/images/recommend-bgd.png"/>
                            <img class="mini-png" src="@/assets/images/recommend2.png">
                        </div>
                        <div class="recomder-Item">
                            <div class="number">125</div>
                            <div style="font-size: 0.181rem;  white-space: nowrap;">评级企业（家）</div>
                        </div>
                    </div>
                    <!-- 第2个item -->
                    <!-- 第3个item -->
                    <div class="recomder">
                        <div class="nav-first">
                            <img alt="" src="@/assets/images/recommend-bgd.png"/>
                            <img class="mini-png" src="@/assets/images/recommend3.png">
                        </div>
                        <div class="recomder-Item">
                            <div class="number">10</div>
                            <div style="font-size: 0.181rem;  white-space: nowrap;">金融机构（家）</div>
                        </div>
                    </div>
                    <!-- 第3个item -->
                    <!-- 第4个item -->
                    <div class="recomder">
                        <div class="nav-first">
                            <img alt="" src="@/assets/images/recommend-bgd.png"/>
                            <img class="mini-png" src="@/assets/images/recommend4.png">
                        </div>
                        <div class="recomder-Item">
                            <div class="number">9</div>
                            <div style="font-size: 0.181rem;  white-space: nowrap;">债券融资（个）</div>
                        </div>
                    </div>
                    <!-- 第4个item -->
                    <!-- 第5个item -->
                    <div class="recomder last-recommend">
                        <div class="nav-first">
                            <img alt="" src="@/assets/images/recommend-bgd.png"/>
                            <img class="mini-png" src="@/assets/images/recommend5.png">
                        </div>
                        <div class="recomder-Item">
                            <div class="number">3,756</div>
                            <div style="font-size: 0.181rem;white-space: nowrap">应急总额（万元）</div>
                        </div>
                    </div>
                </div>

                <div class="searchEnd">
                    <!-- 第一组 -->
                    <div @click="$router.push('/home/recommend-cooperation-mechanism')" class="situation">
                        <img class="situation-bg" alt="" src="@/assets/images/index/situation-bgc1.jpg"/>
                        <div>应急周转<br>资金申请</div>
                        <div>
                            <img alt="" src="@/assets/images/situation1.png"/>

                        </div>
                    </div>
                    <!-- 第一组 -->
                    <!-- 第二组 -->
                    <div class="situation" @click="toTest()">
                        <img class="situation-bg" alt="" src="@/assets/images/index/situation-bgc2.jpg"/>
                        <div>应急周转<br>资金还款</div>
                        <div>
                            <img alt="" src="@/assets/images/situation2.png"/>
                        </div>
                    </div>
                    <!-- 第二组 -->
                    <!-- 第三组 -->
                    <div @click="$router.push('/home/recommend-cooperation-mechanism')" class="situation">
                        <img class="situation-bg" alt="" src="@/assets/images/index/situation-bgc3.jpg"/>
                        <div>应急周转<br>合作机构</div>
                        <div>
                            <img alt="" src="@/assets/images/situation3.png"/>
                        </div>
                    </div>
                    <!-- 第三组 -->
                    <!-- 第四组 -->
                    <div class="situation">
                        <img class="situation-bg" alt="" src="@/assets/images/index/situation-bgc4.jpg"/>
                        <div>应急周转<br>资金记录</div>
                        <div>
                            <img alt="" src="@/assets/images/situation1.png"/>
                        </div>
                    </div>
                    <!-- 第四组 -->
                </div>
            </div>
            <!-- 信息公告开始 -->
            <div class="information">
                <div><img alt="" src="@/assets/images/left.png"/></div>
                <div>信息公告</div>
                <div><img alt="" src="@/assets/images/right.png"/></div>
            </div>
            <!-- 信息公告结束 -->
            <!-- 活动开始 -->
            <div class="tabs">
                <el-tabs @tab-click="handleClick" v-model="activeName">
                    <el-tab-pane name="first">
                        <span slot="label" class="fontClass"><img v-if="firstIsShow" class="tab-item-bgc"
                                                                  src="@/assets/images/index/tab-item-bgc.png"><p>法规通知</p></span>
                        <div class="tabsItem">
                            <!-- 左 -->
                            <div class="tabsItemLeftTop">
                                <div class="tabsItemLeftTopTop">
                                    <p>柳州市“专精特新”</p>
                                    <p>中小工企业服务专题</p>
                                    <img
                                            src="@/assets/images/tabsItemLeftTop.jpg"
                                    />
                                </div>
                                <div class="tabsItemLeftTopBtn">
                                    <div>
                                        <p>惠企政策服务专栏</p>
                                        <img
                                                alt=""
                                                src="@/assets/images/index/tabs-Item-Left-Top-Btn01.jpg"
                                        />
                                    </div>
                                    <div>
                                        <p>企业应急服务专栏</p>
                                        <img
                                                alt=""
                                                src="@/assets/images/index/tabs-Item-Left-Top-Btn02.jpg"
                                        />
                                    </div>
                                    <div class="tabs-Item-Left-Top-Btn-last">
                                        <p style=""><span style="    position: relative;right: 0.15rem;">社会主义核心</span><span class="tabs-Item-Left-Top-Btn-last-span">价值观</span></p>
                                        <img
                                                alt=""
                                                src="@/assets/images/index/tabs-Item-Left-Top-Btn03.jpg"
                                        />
                                    </div>
                                </div>
                            </div>
                            <!-- 右 -->
                            <div class="tabsItem-right">
                                <!-- 消息一开始 -->
                                <div>
                                    <span></span>
                                    <p>
                                        今年第七批自治区创新驱动发展专项资金项目名单公布
                                        柳州....
                                    </p>
                                    <div class="time">
                                        <i class="el-icon-time"></i>
                                        <p>2022-07-22</p>
                                    </div>
                                </div>
                                <!-- 消息一结束 -->
                                <!-- 消息二开始 -->
                                <div>
                                    <span></span>
                                    <p>
                                        今年第七批自治区创新驱动发展专项资金项目名单公布
                                        柳州....
                                    </p>
                                    <div class="time">
                                        <i class="el-icon-time"></i>
                                        <p>2022-07-22</p>
                                    </div>
                                </div>
                                <!-- 消息二结束 -->
                                <!-- 消息三开始 -->
                                <div>
                                    <span></span>
                                    <p>
                                        今年第七批自治区创新驱动发展专项资金项目名单公布
                                        柳州....
                                    </p>
                                    <div class="time">
                                        <i class="el-icon-time"></i>
                                        <p>2022-07-22</p>
                                    </div>
                                </div>
                                <!-- 消息三结束 -->
                                <!-- 消息四开始 -->
                                <div>
                                    <span></span>
                                    <p>
                                        今年第七批自治区创新驱动发展专项资金项目名单公布
                                        柳州....
                                    </p>
                                    <div class="time">
                                        <i class="el-icon-time"></i>
                                        <p>2022-07-22</p>
                                    </div>
                                </div>
                                <!-- 消息四结束 -->
                                <!-- 消息五开始 -->
                                <div>
                                    <span></span>
                                    <p>
                                        今年第七批自治区创新驱动发展专项资金项目名单公布
                                        柳州....
                                    </p>
                                    <div class="time">
                                        <i class="el-icon-time"></i>
                                        <p>2022-07-22</p>
                                    </div>
                                </div>
                                <!-- 消息五结束 -->
                                <!-- 消息六开始 -->
                                <div style="border: none">
                                    <span></span>
                                    <p>
                                        今年第七批自治区创新驱动发展专项资金项目名单公布
                                        柳州....
                                    </p>
                                    <div class="time">
                                        <i class="el-icon-time"></i>
                                        <p>2022-07-22</p>
                                        <a href="">[更多]</a>
                                    </div>
                                </div>
                                <!-- 消息六结束 -->
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="second">
                        <span slot="label" class="fontClass"><img v-if="secondIsShow" class="tab-item-bgc"
                                                                  src="@/assets/images/index/tab-item-bgc.png"><p>金融活动</p></span>
                    </el-tab-pane
                    >
                </el-tabs>
            </div>
            <!-- 加入我们开始 -->
            <div class="join-us">
                <p>立即加入我们，寻求更多合作机会</p>
                <img alt="" src="@/assets/images/join-us.jpg"/>
            </div>
            <!--加入我们结束-->

            <!-- 合作机构展示开始 -->
            <div class="co-operating-agency-div">
                <img class="co-operating-agency-div-bg" src="@/assets/images/index/cooperation-bgc.jpg/">
                <!--合作机构展示头部开始-->
                <div class="co-operating-agency">
                    <div><img alt="" class="co-operating-agency-right-img" src="@/assets/images/right.png"/></div>
                    <div>合作机构展示</div>
                    <div><img alt="" src="@/assets/images/right.png"/></div>
                </div>
                <!--合作机构展示头部结束-->

                <!--合作机构展示main开始-->
                <div class="co-operating-agency-main">
                    <div
                            @mouseout="startScroll"
                            @mouseover="stopScroll"
                            class="contlist"
                            ref="contlist"
                    >
                        <ul>
                            <li :key="index" v-for="(item, index) in list">
                                <!-- {{ index + 1 }} 、<em>{{ item.name }}</em> {{ item.time }} -->
                                <img alt="" src="@/assets/images/scroll-item.png">
                                <!-- <img :src="item.images" alt="" /> -->
                            </li>
                        </ul>
                        <ul>
                            <li :key="index" v-for="(item, index) in list">
                                <!-- {{ index + 1 }} 、<em>{{ item.name }}</em> {{ item.time }} -->
                                <img alt="" src="@/assets/images/scroll-item.png"/>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--合作机构展示main结束-->

                <!--合作机构展示bottom开始-->
                <div class="co-operating-agency-bottom">
                    <div>合作机构</div>
                </div>
                <!--合作机构展示bottom结束-->
            </div>
            <!-- 合作机构展示结束 -->

        </div>
        <!--页面底部开始-->
        <div class="bottom">
            <div class="bottom-left">
                <div>联系我们</div>
                <div>
                    <i class="el-icon-location-outline"></i>柳州市lxxxxxxxxxxx
                </div>
                <div style="position: relative">
                   <div>
                       <i class="el-icon-phone-outline" style="margin-left:-0.8rem"></i> 0772-2487532
                   </div>
                </div>
            </div>
            <div class="bottom-center">
                <div>友情链接</div>
                <div>
                    <h1 style="display: inline-block;margin-right: 0.60606rem">.</h1> 柳州市lxxxxxxxxxxx
                </div>
            </div>
            <div class="bottom-right">
                <div>客服微信</div>
                <div>
                    <img src="@/assets/images/index-wechat.png">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                avatar: require("@/assets/images/userInfo.jpg"),
                activeName: "first",
                list: [
                    {
                        name: "负限位报警",
                        time: "2019-12-18 16:20:34",
                        images: "@/assets/images/scroll-item.png",
                    },
                    {
                        name: "水位报警",
                        time: "2019-12-18 16:20:34",
                        images: "@/assets/images/scroll-item.png",
                    },
                    {
                        name: "正限位报警",
                        time: "2019-12-18 16:20:34",
                        images: "@/assets/images/scroll-item.png",
                    },
                    {
                        name: "温度报警",
                        time: "2019-12-18 16:20:34",
                        images: "@/assets/images/scroll-item.png",
                    },
                    {
                        name: "回架报警",
                        time: "2019-12-18 16:20:34",
                        images: "@/assets/images/scroll-item.png",
                    },
                ], //合作机构展示数组
                scrollW: 0, //记录滚动到哪了
                firstIsShow: true,
                secondIsShow: false,
            };
        },
        methods: {
            // tabs标签页方法
            handleClick(tab, event) {
                if (tab.name == 'first') {
                    console.log(tab, event);
                    this.firstIsShow = true;
                    this.secondIsShow = false;
                } else {
                    this.firstIsShow = false;
                    this.secondIsShow = true;
                }
            },
            //合作展示轮播图
            //鼠标悬停，停止滚动
            stopScroll() {
                var target = this.$refs.contlist;
                clearInterval(this.scrollTime);
            },
            //鼠标移开 ，接着滚动
            startScroll() {
                var target = this.$refs.contlist;
                this.scrollW = target.offsetLeft; // 移开时记录向左移动的距离
                this.scroll();
            },
            //循环滚动
            scroll() {
                var that = this; //因为定时器里要使用vue对象时不能用this, 在定时器中的 this 代表
                var target = this.$refs.contlist;
                var initLeft = 0;
                if (this.scrollW < 0) {
                    initLeft = this.scrollW * -1;
                }
                //定时器
                this.scrollTime = setInterval(function () {
                    initLeft++;
                    if (initLeft >= target.offsetWidth / 2) {
                        initLeft = 0;
                    }
                    target.style.left = "-" + initLeft + "px"; //获取不到translateX的值改用 left

                    //target.style = 'transform: translateX(-'+ initLeft +'px)';
                }, 16);
            },
            toTest() {
                this.$router.push("/home/submit-material/submit-material-basic");
            },
            async getBasicInfo() {
                // let res = await this.request.loginOrRegister.getBasicInfo()
                // console.log(res)
                this.$store.dispatch('getUser')
            }
        },
        mounted() {
            //实例挂载完毕前
            //调用滚动代码
            this.scroll();
            // 页面水印效果
            this.watermark.set("张万志")
            this.getBasicInfo()
        },
    };
</script>

<style scoped src="./index.css">

</style>
